<template>
  <div class="_wz_deptSystemMonitorAdd">
    <div style="padding: 10px 10px 0 0;">
      <Form ref="riskPointDataForm" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
        <FormItem label="运输企业" prop="deptUuid">
          <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="管理制度图片">
          <Upload :before-upload="platformImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传管理制度图片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!platformImg.url?platformImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="平台管理制度" prop="platformContent">
          <tinymce :htmlData="formData.platformContent" :height="350" @tinymceData="val => formData.platformContent = val"></tinymce>
        </FormItem>
        <FormItem label="维护制度图片">
          <Upload :before-upload="maintenanceImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传维护制度图片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!maintenanceImg.url?maintenanceImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="终端维护制度" prop="maintenanceContent">
          <tinymce :htmlData="formData.maintenanceContent" :height="350" @tinymceData="val => formData.maintenanceContent = val"></tinymce>
        </FormItem>
        <FormItem label="岗位制度图片">
          <Upload :before-upload="supervisionImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传岗位制度图片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!supervisionImg.url?supervisionImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="监控人员岗位制度" prop="supervisionContent">
          <tinymce :htmlData="formData.supervisionContent" :height="350" @tinymceData="val => formData.supervisionContent = val"></tinymce>
        </FormItem>
        <FormItem label="违法制度图">
          <Upload :before-upload="illegalImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传违法制度图</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!illegalImg.url?illegalImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="交通违法制度" prop="illegalContent">
          <tinymce :htmlData="formData.illegalContent" :height="350" @tinymceData="val => formData.illegalContent = val"></tinymce>
        </FormItem>
        <FormItem label="值班及交接班图片">
          <Upload :before-upload="shiftsImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传值班及交接班图片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!shiftsImg.url?shiftsImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="值班及交接班制度" prop="shiftsContent">
          <tinymce :htmlData="formData.shiftsContent" :height="350" @tinymceData="val => formData.shiftsContent = val"></tinymce>
        </FormItem>

      </Form>
    </div>


    <div class="demo-drawer-footer" style="z-index: 99;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('riskPointDataForm')">提交</Button>
    </div>

    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>


import tinymce from "../../../components/table/tinymce";
export default {
  props: ['selectData'],//接收来自父组件的数据
  components: {
    tinymce,
  },
  data() {
    return {
      uploadProgress: 0,//文件上传进度
      riskCheckPhaseList: [],
      spinShow: false,//本页加载
      ruleValidate: {//正则
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'}
        ],
        certificateNo: [
          {required: true, message: '请填写统一信用代码', trigger: 'blur'}
        ],
        certificateLegal: [
          {required: true, message: '请填写法人代表', trigger: 'blur'}
        ],
        certificateFoundDate: [
          {type:'date',required: true, message: '请选择建立日期', trigger: 'blur'}
        ],
        certificateDueDate: [
          {type:'date',required: true, message: '请选择截至日期', trigger: 'blur'}
        ],
        certificateAddress: [
          {required: true, message: '请填写营业地址', trigger: 'blur'}
        ],
      },
      subDeptList: [],//运输企业
      formData: {
        deptUuid:''
      },

      platformImg: {data: null,url: ''},//平台管理制度图片
      maintenanceImg: {data: null,url: ''},//终端维护制度图片
      supervisionImg: {data: null,url: ''},//监控人员岗位制度图片
      illegalImg: {data: null,url: ''},//交通违法制度图片
      shiftsImg: {data: null,url: ''},//值班及交接班制度图片

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    if (!!that.selectData.id) {

      that.formData = that.selectData;
      //平台管理制度图片
      that.platformImg = {
        data: null,
        url: !!that.formData.platformImg ? that.apiUrl.imgUrl + that.formData.platformImg : ''
      };
      //终端维护制度图片
      that.maintenanceImg = {
        data: null,
        url: !!that.formData.maintenanceImg ? that.apiUrl.imgUrl + that.formData.maintenanceImg : ''
      };
      //监控人员岗位制度图片
      that.supervisionImg = {
        data: null,
        url: !!that.formData.supervisionImg ? that.apiUrl.imgUrl + that.formData.supervisionImg : ''
      };
      //交通违法制度图片
      that.illegalImg = {
        data: null,
        url: !!that.formData.illegalImg ? that.apiUrl.imgUrl + that.formData.illegalImg : ''
      };
      //值班及交接班制度图片
      that.shiftsImg = {
        data: null,
        url: !!that.formData.shiftsImg ? that.apiUrl.imgUrl + that.formData.shiftsImg : ''
      };


    }

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
        if(!that.selectData.id){
          that.formData.deptUuid = that.subDeptList[0].uuid;
        }
      }
    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法
    platformImgFun(file) {//平台管理制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.platformImg.url = window.URL.createObjectURL(file);
        that.platformImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    maintenanceImgFun(file) {//终端维护制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.maintenanceImg.url = window.URL.createObjectURL(file);
        that.maintenanceImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    supervisionImgFun(file) {//监控人员岗位制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.supervisionImg.url = window.URL.createObjectURL(file);
        that.supervisionImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    illegalImgFun(file) {//交通违法制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.illegalImg.url = window.URL.createObjectURL(file);
        that.illegalImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    shiftsImgFun(file) {//值班及交接班制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.shiftsImg.url = window.URL.createObjectURL(file);
        that.shiftsImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },


    //提交表单
    addSubmit(data) {
      let that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使上传



          var data = JSON.parse(JSON.stringify(that.formData));
          let formData = new FormData();
          delete data.updateTime;
          delete data.createTime;
          delete data.platformImg;
          delete data.platformImgFile;
          delete data.maintenanceImg;
          delete data.maintenanceImgFile;
          delete data.supervisionImg;
          delete data.supervisionImgFile;
          delete data.illegalImg;
          delete data.illegalImgFile;
          delete data.shiftsImg;
          delete data.shiftsImgFile;


          for (let key in data) {
            formData.append(key, data[key]);
          }

          //平台管理制度图片
          if (!!that.platformImg.data) {//选择了图片
            formData.append('platformImgFile', that.platformImg.data);
          }
          //终端维护制度图片
          if (!!that.maintenanceImg.data) {//选择了图片
            formData.append('maintenanceImgFile', that.maintenanceImg.data);
          }
          //监控人员岗位制度图片
          if (!!that.supervisionImg.data) {//选择了图片
            formData.append('supervisionImgFile', that.supervisionImg.data);
          }
          //交通违法制度图片
          if (!!that.illegalImg.data) {//选择了图片
            formData.append('illegalImgFile', that.illegalImg.data);
          }
          //值班及交接班制度图片
          if (!!that.shiftsImg.data) {//选择了图片
            formData.append('shiftsImgFile', that.shiftsImg.data);
          }


          that.axios.post(that.apiUrl.webApi + "/safety/deptSystem/deptSystemMonitorSaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        }else {
          that.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_deptSystemMonitorAdd {
  overflow: auto;
  height: 100%;

  .demo-upload-list {
    display: inline-block;
    width: 120px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);
    margin-right: 4px;

    img {
      width: 100%;
      height: 100%;
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);

      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
}

.ql-container{
  height: 150px;
}
</style>
